<template>
    <Form ref="userForm" :model="fields" :rules="rules">
        <Row :gutter="16">
            <Col span="8">
                <FormItem label="邮箱账号" prop="email">
                    <Input v-model="fields.email" placeholder="电子邮箱"></Input>
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="手机号码" prop="mobile">
                    <Input v-model="fields.mobile" placeholder="手机号码"></Input>
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="真实姓名" prop="realname">
                    <Input v-model="fields.realname" placeholder="请输入真实姓名"></Input>
                </FormItem>
            </Col>
        </Row>
        <FormItem>
            <Button type="primary" @click="handleSubmit">提交</Button>
            <Button type="ghost" style="margin-left: 10px" @click="handleCancel">取消</Button>
        </FormItem>
    </Form>
</template>

<script>
    import util from '@/libs/util';
    export default {
        data () {
            return {
                fields: {
                    email: '',
                    realname: '',
                    mobile: '',
                },

                rules: {
                    email: [
                        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
                        { type: 'email', message: '电子邮箱格式错误', trigger: 'blur' }
                    ],
                    realname: [
                        { required: true, message: '请输入真实姓名, 2~8个字之间', trigger: 'blur', min: 2, max: 8 }
                    ],
                    mobile: [
                        { required: true, message: '请填写正确的手机号码', trigger: 'blur', len: 11 }
                    ]
                }
            }
        },

        props: {
            row: Object,
            rowIndex: Number,
            rootNode: Object
        },

        watch: {
            row: function (row, oldval) {
                this.row = row;
                this.fields = {
                    email: this.row.email,
                    nickname: this.row.nickname,
                    realname: this.row.realname,
                    mobile: this.row.mobile
                };
            }
        },

        methods: {
            handleSubmit () {
                this.$refs.userForm.validate((valid) => {
                    if (valid) {
                        this.updateUser(this.fields);
                    } else {
                        this.$Message.error('验证失败');
                    }
                });
            },

            handleCancel () {
                this.rootNode.editModel = false;
            },

            updateUser (data) {
                util.api().patch(`/admin/api/admins/${this.row.id}`, data).then((resp) => {
                    if (resp.data.status == true) {
                        this.$Message.success(resp.data.message);
                        this.rootNode.editModel = false;
                        this.updateRow(data);
                        this.$emit('on-change', this.row, this.rowIndex);
                    } else {
                        this.$Message.error(resp.data.message);
                    }
                }).catch((e) => {
                    if (e.response) {
                        if (e.response.status == 422) {
                            if (e.response.data.hasOwnProperty('errors')) {
                                for (let i in e.response.data.errors) {
                                    this.$Notice.error({ title: '表单数据验证失败', desc: e.response.data.errors[i][0] });
                                }
                            }
                        } else {
                            this.$Message.error(e.response.data.message);
                        }
                    }  else {
                        this.$Message.error('网络请求异常');
                    }
                })
            },

            updateRow (data) {
                for (let index in data) {
                    this.row[index] = data[index];
                }
            }
        }
    }
</script>